<template>
  <div class="app-container">
    <!-- 路由页面内容 -->
    <router-view />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Sidebar from './components/Sidebar.vue'
import Home from './components/Home.vue'
import ExcelForm from './components/ExcelForm.vue'
import WorkflowDesigner from './components/WorkflowDesigner.vue'
import emitter from './event-bus'

const activeTab = ref('home')
const dynamicTabs = ref([])

function openExcelTab() {
  // 如果已存在则直接切换
  if (!dynamicTabs.value.find(t => t.name === 'excel')) {
    dynamicTabs.value.push({ name: 'excel', label: '新建-Excel' })
  }
  activeTab.value = 'excel'
}

function openWorkflowDesigner() {
  // 如果已存在则直接切换
  if (!dynamicTabs.value.find(t => t.name === 'workflow')) {
    dynamicTabs.value.push({ name: 'workflow', label: '流程集成' })
  }
  activeTab.value = 'workflow'
}

function handleTabClick(tab) {
  activeTab.value = tab.paneName
}

onMounted(() => {
  emitter.on('open-workflow-designer', openWorkflowDesigner)
  emitter.on('close-workflow-designer', () => {
    activeTab.value = 'home'
  })
})
onUnmounted(() => {
  emitter.off('open-workflow-designer', openWorkflowDesigner)
  emitter.off('close-workflow-designer')
})
</script>

<style scoped>

::v-deep(.el-tabs__header) {
  margin: 0;
  border-bottom: none !important;
  background: transparent !important;
  padding-left: 0 !important;
}
::v-deep(.el-tabs__nav) {
  border: none !important;
  margin-left: 0 !important;
  background: transparent !important;
  justify-content: flex-start !important;
}
::v-deep(.el-tabs__item.is-active) {
  background: #fff;
  color: #222 !important;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -2px 8px 0 rgba(0,0,0,0.03);
  font-weight: bold;
  padding: 8px 16px !important;
  min-width: 40px;
  margin-bottom: 0;
  z-index: 12;
  position: relative;
  margin-left: 0 !important;
}
::v-deep(.el-tabs__item) {
  font-size: 18px;
  min-width: 40px;
  transition: background 0.2s;
  padding: 8px 16px !important;
  margin-left: 0 !important;
}
::v-deep(.el-tabs__active-bar) {
  display: none !important;
}
.sidebar {
  background: #fff;
  border-right: 1px solid #e4e7ed;
  height: 100vh;
  padding-top: 8px;
}
.main-content {
  background: #fff;
  min-height: calc(100vh - 60px);
  padding: 24px;
  border-radius: 0 18px 18px 18px;
  margin-top: -22px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
}
.welcome-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 24px;
  margin-top: 20px;
  color: #222;
}
.tab-img-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 400px;
}
.tab-img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08);
  background: #fff;
}
</style> 